<template>
  <el-config-provider :locale="locale">
    <div class="app-wrapper" :class="classObj">
    <Sidebar class="sidebar-container" />
    <div class="main-container">
      <div class="fixed-header">
        <NavBar />
      </div>
      <AppMain />
    </div>
  </div>
  </el-config-provider>
</template>
<script setup lang="ts">
import {computed} from "vue"
import Sidebar from "./layout/Sidebar/index.vue"
import AppMain from "./layout/AppMain/index.vue"
import NavBar from "./layout/Navbar/index.vue"
import {useApplicationStore} from "./stores/applocation"
import zhCn from "element-plus/es/locale/lang/zh-cn";
const locale = zhCn;
const applicationStore = useApplicationStore()

const classObj = computed(() => {
  const sidebarOpen  = applicationStore.sidebarOpen
  console.log(sidebarOpen,"sidebarOpen")
  return sidebarOpen ? "openSidebar" : "hideSidebar"
})



</script>
<style scoped lang="scss">

.app-wrapper{
  position: relative;
  height: 100%;
  width: 100%;
}
.sidebar-container{
  webkit-transition: width .28s;
  transition: width .28s;
  width: 210px!important;
  //background-color: #304156;
  height: 100%;
  position: fixed;
  font-size: 0;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  overflow: hidden;
}

.main-container{
  min-height: 100%;
  -webkit-transition: margin-left .28s;
  transition: margin-left .28s;
  margin-left: 210px;
  position: relative;
}
.sidebar-container {
  transition: width 0.28s;
  width:210px !important;
  //background-color: #304156;
  height: 100%;
  position: fixed;
  font-size: 0px;
  top: 0;
  bottom: 0;
  left: 0;
  z-index: 1001;
  overflow: hidden;
}
.hideSidebar {
  .sidebar-container {
    width: 64px !important;
  }

  .main-container {
    margin-left: 64px;
    position:relative;
  }
}
.fixed-header{
  position:sticky;
  z-index: 1000;
  top:0;
  left:0;
}
</style>
